<template>
	<view class="matchmain animated fadeIn faster">
		<view class="position-fixed w-100 z-index-100 pb-1" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}">
			<view class="d-flex d-flex-middle d-flex-between" :style="{'height': $store.state.titleBarHeight + 'px'}">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30 colorfff"></text></view>
				<view class="colorfff">搭子铃</view>
				<text class="iconfont icon-31fanhui1 font30 colorfff vhiden"></text>
			</view>
		</view>
		<view :style="{paddingTop:$store.state.statusBarHeight+'px',height: $store.state.titleBarHeight + 'px'}"></view>
		<view class="colorfff text-right mt-3 mr-6 font26" @click="gotoBellSetting">设置</view>
		<view class="dazibell d-flex d-flex-center mt-6 position-relative" style="width: 100%;">
			<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203401%402x.png" style="width: 420rpx; height: 188rpx;"></image>
			<view class="matchbtn position-absolute colorfff linerbg rounded30 py-1 px-1" style="bottom: -10rpx; letter-spacing: 5rpx;">低速匹配</view>
		</view>
		<view class="d-flex d-flex-center mb-7 mt-5 font24">
			<text class="colorfff">今天已有</text>
			<text class="colorman">1197256</text>
			<text class="colorfff">人在这里相遇</text>
		</view>
		<view class="metting-box position-absolute bottom-0">
			<view class="font34 font-bold pt-1 pl-2 linerbg-b pb-5">猜你想要奇遇的人</view>
			<view class="d-flex d-flex-between pl-3 pr-4 font30 mb-5">
				<text>你想要的距离</text>
				<text style="color: #46C4FF;">0 - 10km</text>
			</view>
			<view class="progress-box pl-3 pr-4" border-radius="10prx 10prx 10prx 10prx" style="width: 100%; box-sizing: border-box;">
				<progress :percent="progress" activeColor="#FF389C" stroke-width="10"/>
			</view>
			<view class="pl-3 pr-4 font30 mt-4 mb-3">你想要Ta</view>
			<view class="pl-3 pr-4 d-flex d-flex-between" style="color: #46C4FF;">
				<view class="span-48 py-2 pl-5 rounded50 text-center position-relative" style="border: 1px solid #46C4FF; background: #CFF0FB;">
					<text>当天在线</text>
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201712%402x.png" class="position-absolute" style="width: 35rpx; height: 35rpx; left: 80rpx;"></image>
				</view>
				<view class="span-48 py-2 pl-5 text-center rounded50 position-relative" style="border: 1px solid #46C4FF; background: #CFF0FB;">
					<text>想聊天</text>
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201717%402x.png" class="position-absolute" style="width: 35rpx; height: 35rpx; left: 92rpx; top: 50%; transform: translateY(-50%);"></image>
				</view>
			</view>
			<view class="d-flex d-flex-between ml-4 mt-5">
				<view class="d-flex d-flex-between d-flex-middle">
					<view class="mr-2">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201708%402x.png" style="width: 75rpx; height: 61rpx;"></image>
					</view>
					<view class="font30 d-flex-column">
						<text>加速卡</text>
						<text class="font22" style="color: #9D9D9E;">急速匹配,快人一倍</text>
					</view>
				</view>
				<view class="d-flex mr-4 d-flex-middle">
					<view class="mr-1">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201941.png" style="width: 30rpx; height: 30rpx;"></image>
					</view>
					<view class="font36 font-bold">6</view>
					<view class="font30 mr-1" style="color: #C7C8C9; text-decoration: line-through;">60</view>
					<view class="mr-4">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201947.png" style="width: 40rpx; height: 40rpx;"></image>
					</view>
				</view>
			</view>
			<view class="d-flex d-flex-between ml-4 mt-5">
				<view class="d-flex d-flex-between d-flex-middle">
					<view class="ml-1 mr-2">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201955.png" style="width: 61rpx; height: 82rpx;"></image>
					</view>
					<view class="font30 d-flex-column">
						<text>加速体验卡</text>
						<text class="font22" style="color: #9D9D9E;">每日19点-22点可用</text>
					</view>
				</view>
			</view>
			<view class="linerbg mx-4 text-center colorfff font38 py-2 rounded50 mt-7" style="box-sizing: border-box;">帮我加速奇遇Ta</view>
			<view class="d-flex d-flex-center mt-2" style="color: #717071;">
				<view class="">先看人再付费哦,本单定价</view>
				<view class="mr-1 ml-1 d-flex-btn">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201941.png" style="width: 30rpx; height: 30rpx;"></image>
				</view>
				<view class="mr-1">35</view>
				<view class="mr-1 d-flex-btn">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203365.png" style="width: 18rpx; height: 15rpx;"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { manner } from "@/util/manner.js";
	export default {
		data() {
			return {
				bgcolor:'transparent',
				progress: 20
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 10) {
				this.bgcolor = '#191635'
			}else{
				this.bgcolor = 'transparent'
			}
		},
		methods: {
			goBack(){
				manner.goBack()
			},
			gotoBellSetting() {
				uni.navigateTo({
					url: '/pagesMain/bell-setting/bell-setting'
				})
			}
		}
	}
</script>

<style scoped>
.matchmain{
	background-image: url('https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/machbg.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 100%;
	min-height: 100vh;
}
.metting-box {
	width: 98%;
	height: 940rpx;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 50rpx 50rpx 0 0;
	background-color: #fff;
	overflow: hidden;
}
.linerbg-b {
	background: linear-gradient( 180deg, #61D1E5 0%, rgba(106,211,230,0.94) 10%, rgba(131,219,234,0.78) 29%, rgba(172,230,241,0.52) 54%, rgba(227,247,250,0.17) 86%, rgba(255,255,255,0) 100%);
}
/deep/ .uni-progress-bar {
	border-radius: 10rpx !important;
}
.colorman{
	color:#5db0fe
}
</style>
